import React, { useState } from 'react';
import { useParams, Link } from 'react-router-dom';
import { ArrowLeft, Mail, Phone, MapPin, Calendar, Award, CheckCircle2, AlertCircle, Clock, User, Briefcase, GraduationCap, FileText, MessageSquare, Send } from 'lucide-react';

export default function CandidateDetail() {
  const { id } = useParams();
  const [activeTab, setActiveTab] = useState('overview');

  // Mock data - in real app, this would come from API based on ID
  const candidate = {
    id: '1',
    name: '张三',
    email: 'zhang@example.com',
    phone: '+86 138-0013-8000',
    position: '前端工程师',
    location: '上海',
    stage: '初筛',
    score: 85,
    avatar: 'https://images.pexels.com/photos/2379004/pexels-photo-2379004.jpeg?auto=compress&cs=tinysrgb&w=64&h=64&fit=crop&crop=face',
    skills: ['React', 'TypeScript', 'Node.js', 'GraphQL', 'AWS'],
    experience: '3年',
    education: '本科 - 计算机科学与技术',
    company: '腾讯科技',
    salary: '25-30K',
    highlights: [
      'React生态系统经验丰富，包括Next.js、Redux等',
      'TypeScript使用熟练，有大型项目重构经验',
      '参与过微服务架构设计和实施',
      '具备良好的代码review和团队协作能力'
    ],
    concerns: [
      'Node.js后端开发经验相对较少',
      '缺少云原生容器化部署经验',
      '项目管理和团队领导经验不足'
    ],
    timeline: [
      { date: '2024-01-15', type: 'application', content: '简历投递' },
      { date: '2024-01-16', type: 'screening', content: '初筛通过，评分85分' },
      { date: '2024-01-18', type: 'interview', content: '安排技术面试' },
      { date: '2024-01-20', type: 'note', content: 'HR备注：候选人对薪资有一定期望' }
    ]
  };

  const tabs = [
    { id: 'overview', name: '基本信息', icon: User },
    { id: 'resume', name: '简历解析', icon: FileText },
    { id: 'evaluation', name: '匹配评分', icon: Award },
    { id: 'timeline', name: '时间线', icon: Clock }
  ];

  const getScoreColor = (score: number) => {
    if (score >= 90) return 'text-green-600 bg-green-50 border-green-200';
    if (score >= 80) return 'text-blue-600 bg-blue-50 border-blue-200';
    if (score >= 70) return 'text-yellow-600 bg-yellow-50 border-yellow-200';
    return 'text-red-600 bg-red-50 border-red-200';
  };

  return (
    <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
      {/* Header */}
      <div className="mb-6">
        <Link to="/candidates" className="inline-flex items-center text-sm text-gray-500 hover:text-gray-700 mb-4">
          <ArrowLeft className="h-4 w-4 mr-1" />
          返回候选人列表
        </Link>
        
        <div className="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
          <div className="flex items-center justify-between">
            <div className="flex items-center space-x-4">
              <img
                className="h-16 w-16 rounded-full"
                src={candidate.avatar}
                alt={candidate.name}
              />
              <div>
                <h1 className="text-2xl font-bold text-gray-900">{candidate.name}</h1>
                <p className="text-lg text-gray-600">应聘：{candidate.position}</p>
                <div className="mt-2 flex items-center space-x-4 text-sm text-gray-500">
                  <span className="flex items-center">
                    <Mail className="h-4 w-4 mr-1" />
                    {candidate.email}
                  </span>
                  <span className="flex items-center">
                    <Phone className="h-4 w-4 mr-1" />
                    {candidate.phone}
                  </span>
                  <span className="flex items-center">
                    <MapPin className="h-4 w-4 mr-1" />
                    {candidate.location}
                  </span>
                </div>
              </div>
            </div>
            
            <div className="flex items-center space-x-4">
              <div className={`p-4 rounded-lg border-2 ${getScoreColor(candidate.score)}`}>
                <div className="text-center">
                  <div className="text-2xl font-bold">{candidate.score}</div>
                  <div className="text-sm">匹配评分</div>
                </div>
              </div>
              
              <div className="space-y-2">
                <button className="w-full px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors">
                  安排面试
                </button>
                <button className="w-full px-4 py-2 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 transition-colors">
                  发送邮件
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>

      {/* Tabs */}
      <div className="border-b border-gray-200 mb-6">
        <nav className="-mb-px flex space-x-8">
          {tabs.map((tab) => {
            const Icon = tab.icon;
            return (
              <button
                key={tab.id}
                onClick={() => setActiveTab(tab.id)}
                className={`${
                  activeTab === tab.id
                    ? 'border-blue-500 text-blue-600'
                    : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'
                } whitespace-nowrap py-2 px-1 border-b-2 font-medium text-sm flex items-center`}
              >
                <Icon className="h-4 w-4 mr-2" />
                {tab.name}
              </button>
            );
          })}
        </nav>
      </div>

      {/* Tab Content */}
      <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
        {/* Main content */}
        <div className="lg:col-span-2">
          {activeTab === 'overview' && (
            <div className="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
              <h3 className="text-lg font-medium text-gray-900 mb-4">基本信息</h3>
              <dl className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                <div>
                  <dt className="text-sm font-medium text-gray-500">当前公司</dt>
                  <dd className="mt-1 text-sm text-gray-900">{candidate.company}</dd>
                </div>
                <div>
                  <dt className="text-sm font-medium text-gray-500">工作经验</dt>
                  <dd className="mt-1 text-sm text-gray-900">{candidate.experience}</dd>
                </div>
                <div>
                  <dt className="text-sm font-medium text-gray-500">教育背景</dt>
                  <dd className="mt-1 text-sm text-gray-900">{candidate.education}</dd>
                </div>
                <div>
                  <dt className="text-sm font-medium text-gray-500">期望薪资</dt>
                  <dd className="mt-1 text-sm text-gray-900">{candidate.salary}</dd>
                </div>
              </dl>
              
              <div className="mt-6">
                <h4 className="text-sm font-medium text-gray-500 mb-3">技能标签</h4>
                <div className="flex flex-wrap gap-2">
                  {candidate.skills.map((skill, index) => (
                    <span key={index} className="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-blue-100 text-blue-800">
                      {skill}
                    </span>
                  ))}
                </div>
              </div>
            </div>
          )}

          {activeTab === 'evaluation' && (
            <div className="space-y-6">
              {/* Score breakdown */}
              <div className="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
                <h3 className="text-lg font-medium text-gray-900 mb-4">评分详情</h3>
                <div className="space-y-4">
                  <div className="flex items-center justify-between">
                    <span className="text-sm text-gray-600">技能匹配度</span>
                    <div className="flex items-center">
                      <div className="w-32 bg-gray-200 rounded-full h-2 mr-3">
                        <div className="bg-blue-600 h-2 rounded-full" style={{ width: '85%' }}></div>
                      </div>
                      <span className="text-sm font-medium">85%</span>
                    </div>
                  </div>
                  <div className="flex items-center justify-between">
                    <span className="text-sm text-gray-600">经验匹配度</span>
                    <div className="flex items-center">
                      <div className="w-32 bg-gray-200 rounded-full h-2 mr-3">
                        <div className="bg-green-600 h-2 rounded-full" style={{ width: '78%' }}></div>
                      </div>
                      <span className="text-sm font-medium">78%</span>
                    </div>
                  </div>
                  <div className="flex items-center justify-between">
                    <span className="text-sm text-gray-600">教育背景</span>
                    <div className="flex items-center">
                      <div className="w-32 bg-gray-200 rounded-full h-2 mr-3">
                        <div className="bg-yellow-600 h-2 rounded-full" style={{ width: '90%' }}></div>
                      </div>
                      <span className="text-sm font-medium">90%</span>
                    </div>
                  </div>
                </div>
              </div>

              {/* Highlights */}
              <div className="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
                <h3 className="text-lg font-medium text-gray-900 mb-4 flex items-center">
                  <CheckCircle2 className="h-5 w-5 text-green-500 mr-2" />
                  候选人亮点
                </h3>
                <ul className="space-y-3">
                  {candidate.highlights.map((highlight, index) => (
                    <li key={index} className="flex items-start">
                      <CheckCircle2 className="h-4 w-4 text-green-500 mr-3 mt-0.5 flex-shrink-0" />
                      <span className="text-sm text-gray-700">{highlight}</span>
                    </li>
                  ))}
                </ul>
              </div>

              {/* Concerns */}
              <div className="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
                <h3 className="text-lg font-medium text-gray-900 mb-4 flex items-center">
                  <AlertCircle className="h-5 w-5 text-yellow-500 mr-2" />
                  关注点
                </h3>
                <ul className="space-y-3">
                  {candidate.concerns.map((concern, index) => (
                    <li key={index} className="flex items-start">
                      <AlertCircle className="h-4 w-4 text-yellow-500 mr-3 mt-0.5 flex-shrink-0" />
                      <span className="text-sm text-gray-700">{concern}</span>
                    </li>
                  ))}
                </ul>
              </div>
            </div>
          )}

          {activeTab === 'timeline' && (
            <div className="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
              <h3 className="text-lg font-medium text-gray-900 mb-4">时间线</h3>
              <div className="flow-root">
                <ul className="-mb-8">
                  {candidate.timeline.map((item, index) => (
                    <li key={index}>
                      <div className="relative pb-8">
                        {index !== candidate.timeline.length - 1 && (
                          <span className="absolute top-4 left-4 -ml-px h-full w-0.5 bg-gray-200" />
                        )}
                        <div className="relative flex space-x-3">
                          <div>
                            <span className="h-8 w-8 rounded-full bg-blue-500 flex items-center justify-center ring-8 ring-white">
                              <Clock className="h-4 w-4 text-white" />
                            </span>
                          </div>
                          <div className="min-w-0 flex-1 pt-1.5">
                            <p className="text-sm text-gray-500">{item.date}</p>
                            <p className="text-sm text-gray-900">{item.content}</p>
                          </div>
                        </div>
                      </div>
                    </li>
                  ))}
                </ul>
              </div>
            </div>
          )}
        </div>

        {/* Sidebar */}
        <div className="space-y-6">
          {/* Stage progression */}
          <div className="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
            <h3 className="text-lg font-medium text-gray-900 mb-4">阶段流转</h3>
            <div className="space-y-3">
              {['初筛', '面试', 'Offer', '已入职'].map((stage, index) => (
                <div key={stage} className={`flex items-center p-3 rounded-lg border-2 ${
                  candidate.stage === stage ? 'border-blue-500 bg-blue-50' : 'border-gray-200'
                }`}>
                  <div className={`h-3 w-3 rounded-full mr-3 ${
                    candidate.stage === stage ? 'bg-blue-500' : 'bg-gray-300'
                  }`} />
                  <span className={`text-sm font-medium ${
                    candidate.stage === stage ? 'text-blue-700' : 'text-gray-600'
                  }`}>
                    {stage}
                  </span>
                </div>
              ))}
            </div>
            <button className="w-full mt-4 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors">
              推进到下一阶段
            </button>
          </div>

          {/* Quick actions */}
          <div className="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
            <h3 className="text-lg font-medium text-gray-900 mb-4">快捷操作</h3>
            <div className="space-y-2">
              <button className="w-full flex items-center px-4 py-2 text-left text-gray-700 hover:bg-gray-50 rounded-lg transition-colors">
                <Calendar className="h-4 w-4 mr-3" />
                安排面试
              </button>
              <button className="w-full flex items-center px-4 py-2 text-left text-gray-700 hover:bg-gray-50 rounded-lg transition-colors">
                <Send className="h-4 w-4 mr-3" />
                发送邮件
              </button>
              <button className="w-full flex items-center px-4 py-2 text-left text-gray-700 hover:bg-gray-50 rounded-lg transition-colors">
                <MessageSquare className="h-4 w-4 mr-3" />
                添加备注
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}